<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
</head>
<body>
<section id="app">
    <header class="header">
      <h1>小黑记事本</h1>
      <input v-model.trim="List" @keyup.enter="add" placeholder="请输入任务" class="new-todo" />
      <button @click="add"  class="add">添加任务</button>
    </header>
    <section class="main">
      <ul class="todo-list">
        <li v-for="(item,index) in list" :key="item.id" class="todo">
          <div class="view">
            <span class="index">{{index+1}}.</span> 
            {{item.task}}
            <button @click="del(item.id)" class="destroy">取消任务</button>
          </div>
        </li>
      </ul>
    </section>
    <footer v-if="list.length>0" class="footer">
      <span class="todo-count">合 计: 
        {{list.length}}</span>
      <button @click="clear" class="clear-completed">
        清空任务
      </button>
    </footer>
  </section>
 
<script src="./js/2.7.14_dist_vue.js"></script>
  <script>
   const app = new Vue({
    el: '#app',
    data: {
        List:'',
      list:[]
    },
    methods: {
        del(id){
          this.list = this.list.filter(item => item.id !== id)    
        },
        add(){
        if(this.List.length===0){
            console.log();
            return alert("不允许输入为空哦")
        }
          this.list.unshift({
            id:+new Date(),
            task:this.List
          })
          this.List=''
        },
       clear(){
       this.list=[]
       }
   
    },
})
  </script>
</body>
</html>